<template>
	<GlobalBG title="智能检索调阅" :showHeader="true" :showBack="true">
		<view class="container-video">
			<view class="conten-item-box">
				<view class="chat">
					<view class="chat-content" ref="customDiv">
						<view v-for="(item, index) in dhList" :key="index">
							<view class="left-text" v-if="item.type == 'l'">
								<view class="usericon">
									<image src="/static/images/xgjd/video/jqr.png" />
								</view>
								<view class="text-box">
									<view class="htmltext" v-html="item.content"></view>
									<view class="panelbtns" v-for="item in item.btns"
										:class="{ active: currentType == item.id }" :key="item.id"
										@click="currentType = item.id">
										{{ item.name }}
									</view>
								</view>

								<!-- 操作按钮 -->
								<view class="bototm-panel" v-if="
				              item.type == 'l' &&
				              index == dhList.length - 1 &&
				              index !== 0 &&
				              item.list
				            ">
									<span class="btns" @click="emitPoint(item.list)">
										<!-- <image class="copypng" src="../assets/images/copy.png" /> -->
										<span>视频上屏</span>
									</span>
									<!-- <span class="btns">
				              <image class="copypng" src="../assets/images/refresh.png" />
				              <span>重新生成</span>
				            </span> -->
								</view>
								<view class="echarts-content" v-if="item.list">
									<!-- <treeEcharts :options="item.list"></treeEcharts> -->
								</view>
							</view>
							<view class="right-text" v-if="item.type == 'r'">
								<view class="text-box">
									<view class="htmltext" v-html="item.content"></view>
									<!-- <image v-if="item.audioUrl" :src="item.audioUrl" /> -->
									<p v-if="item.audioUrl" @click="speakUrl(item.audioUrl)">
										点击播放语音
									</p>
								</view>
								<view class="usericon">
									<image src="/static/images/xgjd/video/user.png" />
								</view>
							</view>
						</view>
					</view>
					<view class="stop-btn" v-if="isloading && false" @click="stopTosend">
						<!-- <image src="../assets/images/stop.png" /> -->
						<span>停止生成</span>
					</view>
					<view class="chat-input">
						<image class="sendimg mr10" @click="handleEnter" v-if="!isloading"
							src="/static/images/xgjd/video/refresh.png" />
						<uni-easyinput style="border-radius: 40rpx;" v-model="speak"
							placeholder="请输入内容"></uni-easyinput>
						<image class="sendimg ml10" @click="handleEnter" v-if="!isloading"
							src="/static/images/xgjd/video/send.png" />
					</view>
				</view>
			</view>
		</view>
	</GlobalBG>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from "vue";
	let speak = ref("");
	let isloading = ref(false);
	let currentType = ref("area");
	let dhList = ref([{
		type: "l",
		tips: '例如："查找新港社区的所有监控"，"显示昨天XX街发生交通事故的视频点位”',
		btns: [{
				name: "场所定位：调取XX社区正门监控",
				id: "area",
			},
			{
				name: "事件追溯：调取昨天下午新园路占道经营视频",
				id: "area",
			},
			{
				name: "应急指挥：展示防汛场景视频",
				id: "camera_scene",
			},
			{
				name: "算法检索：查找具备占道经营分析能力的视频设备",
				id: "camera_arithmetic",
			},
		],
		content: "您好，我是智能视频检索助手，您可以通过文字或语音告诉我您想查看的视频监控设备！",
	}, ]);
	const typeText = (content, idx) => {
		return new Promise((resolve, reject) => {
			dhList.value[idx].content = "";
			let shan =
				"<span style='margin-left:5px;background-color:#1b97f1;'>&nbsp;</span>";
			let len = shan.length;
			let index = 0; // 当前正在输出的单词索引
			let randomNum = 100;
			dhList.value[idx].type = "l";
			let interval = setInterval(() => {
				scrollToBottom();
				randomNum = Math.floor(Math.random() * (61 - 50) + 70);
				if (index === content.length) {
					dhList.value[idx].content = dhList.value[idx].content.substring(
						0,
						dhList.value[idx].content.length - len
					);
					clearInterval(interval); // 所有单词都已经输出完毕时清除计时器
					scrollToBottom();
					resolve();
				} else {
					if (dhList.value[idx].content.length > 0) {
						dhList.value[idx].content = dhList.value[idx].content.substring(
							0,
							dhList.value[idx].content.length - len
						);
					}
					dhList.value[idx].content += content[index]; // 将当前单词添加到显示内容中
					index++; // 更新索引值
					dhList.value[idx].content += shan;
				}
			}, 50); // 每500ms输出一个单词
		});
	};

	const outmsg2 = async (content, result) => {
		let se = content
			.replaceAll("\\n", "\n")
			.replaceAll("\n\n", "<br/>")
			.replaceAll("\n", "<br/>");

		scrollToBottom();
		dhList.value.push({
			type: "r",
			content: se,
			list: result,
		});
		await typeText(
			dhList.value[dhList.value.length - 1].content.split(""),
			dhList.value.length - 1
		);
	};

	const customDiv = ref();
	const scrollToBottom = () => {
		nextTick(() => {
			if (customDiv.value) {
				customDiv.value.scrollTop = customDiv.value.scrollHeight;
			}
		});
	};
	let currentUser = ref({
		conversationId: ""
	});
	const handleEnter = async () => {
		if (isloading.value) return;
		try {
			if (!speak.value) return;
			isloading.value = true;
			dhList.value.push({
				type: "r",
				content: speak.value,
			});
			dhList.value.push({
				type: "l",
				content: "正在解析...",
			});
			let sendtext = speak.value;
			speak.value = "";
			let {
				data
			} = await sendMessageApi({
				query: sendtext,
				conversationId: currentUser.value.conversationId || "",
				user: "123456789",
				tagGroupCode: currentType.value,
			});
			if (!currentUser.value.conversationId) {
				currentUser.value.conversationId = data.conversationId;
			}

			dhList.value.pop();
			scrollToBottom();
			setTimeout(() => {
				outmsg2(
					// `API调用: 你可以继续提问?\n1、新开里小区。\n 2、近开里小区点位。`
					`${data.aiAnswer}`,
					data.body.result.data
				);
			}, 30);
			isloading.value = false;
		} catch (e) {
			speak.value = "";
			isloading.value = false;
			console.error(e);
		}
	};

	const stopTosend = () => {
		isloading.value = false;
	};

	async function copyText(text) {
		try {
			// 使用 Clipboard API 写入文本
			await navigator.clipboard.writeText(text);
			console.log("已复制文本：", text);
		} catch (err) {
			console.error("复制失败：", err);
		}
	}
</script>

<style lang="scss">
	.container-video {
		width: 100%;
		height: 100%;
		padding: 28rpx 19rpx;

		.chat {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			position: relative;

			.chat-content {
				width: 100%;
				flex: 1;
				padding: 34rpx 30rpx;
				overflow-y: auto;
				position: relative;

				.left-text {
					width: 100%;

					.usericon {
						display: inline-block;
						vertical-align: top;
						margin-right: 13rpx;

						image {
							width: 71rpx;
							height: 65rpx;
						}
					}

					.text-box {
						margin-top: 8rpx;
						display: inline-block;
						vertical-align: top;
						max-width: calc(100% - 100rpx);
						min-height: 96rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
						border-radius: 15rpx;
						line-height: 46rpx;
						padding:  0;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 27rpx;
						color: #333333;

						.htmltext {
							padding: 23rpx;
						}
					}

					.panelbtns {
						margin-top: 10rpx;
						width: 100%;
						height: 70rpx;
						background: #E4EFFD;
						border-radius: 15rpx;
						border: 2rpx solid #C3DCFF;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #666666;
						line-height: 70rpx;
						padding: 0 0 0 32rpx;

						&.active {
							color: #27c8ff;
						}

						&:hover {
							color: #27c8ff;
						}
					}

					.echarts-content {
						margin: 15px 0;
						margin-left: 72px;
						width: 694px;
						height: 500px;
					}
				}

				.right-text {
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					width: 100%;
					text-align: right;

					.usericon {
						display: inline-block;
						vertical-align: top;

						image {
							width: 71rpx;
							height: 65rpx;
						}
					}

					.text-box {
						margin-top: 8rpx;
						display: inline-block;
						vertical-align: top;
						max-width: calc(100% - 100rpx);
						min-height: 96rpx;
						background: #2263BF;
						box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
						border-radius: 15rpx;
						line-height: 46rpx;
						padding:  0;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 27rpx;
						color: #fff;
						
						.htmltext {
							padding: 23rpx;
						}
					}
				}

				.bototm-panel {
					margin: 15px 0;
					margin-left: 72px;
					width: 694px;
					height: 60px;
					background: rgba(12, 71, 151, 0.6);
					border-radius: 12px;
					border: 1px solid rgba(127, 150, 255, 1);
					cursor: pointer;
					// border-image: linear-gradient(
					//     180deg,
					//     rgba(127, 150, 255, 1),
					//     rgba(72, 192, 255, 1),
					//     rgba(127, 150, 255, 1)
					//   )
					//   12 12;
					font-family: PingFangSC, PingFang SC;
					font-size: 20px;
					color: #b6d6ff;
					line-height: 54px;
					padding: 0 30px;

					&:hover {
						color: #27c8ff;
					}
				}
			}

			.stop-btn {
				width: 95px;
				height: 30px;
				text-align: center;
				cursor: pointer;
				background: rgba(34, 126, 255, 0.1);
				border-radius: 4px;
				border: 1px solid rgba(34, 99, 191, 0.15);
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #2263bf;
				line-height: 30px;
				position: absolute;
				bottom: 120px;
				left: 241px;
				display: flex;
				align-items: center;
				padding: 0 8px;
				cursor: pointer;
				z-index: 999;

				image {
					margin-right: 4px;
				}
			}

			.chat-input {
				display: flex;
				align-items: center;
				width: 100%;
				height: 150rpx;
				padding: 26rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(40, 72, 118, 0.12);

				.speekinput {
					width: 650px;
					height: 90px;
					box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.18);
					border-radius: 6px;
					background: #003173;
				}
			}





			.sendimg {
				width: 61rpx;
				height: 61rpx;
				cursor: pointer;
				z-index: 999;
			}



			.speak {
				margin-left: 35px;
				width: 61rpx;
				height: 61rpx;
			}
		}
	}
</style>